<template>
	<view class="index page-bg">
		<view class="bg-f">
		<u-swiper v-if='banner.length > 0' @click='clickBanner' :list="banner"  :effect3d="false" :autoplay='true' height='250' mode='number' indicator-pos='bottomRight'></u-swiper>
		</view>
		<view class="index-nav" style="background-color: #fff;">
			<view class="index-nav__item" v-for="item in navs" :key='item.id' @click="$link(item.path)">
				<image class="index-nav__img" :src="item.icon"></image>
				<view class="index-item__title">{{item.name}}</view>
			</view>
		</view>
		<view class="content-20" style="background-color: #fff;">
		<view class="notice" @click="$link('/pagesMain/notice/notice')" v-if="noticeList.length > 0">
			<image  class="notice-icon" src="../../static/icon_01.png" mode=""></image>
			<swiper class="notice-swiper" :display-multiple-items='3' :disable-touch="true" :touchable="false" :autoplay="true" :interval="2000" :duration="500" :circular="true" :vertical="true">
				<swiper-item v-for="item in noticeList" :key='item.id' class="swiper-item">
					<view class="notice-title">{{common.stringPartOf(item.title, 17)}}</view>
					<view class="desc">{{item.timeFormat}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="section-title" @click="$link('/pagesMain/service/service')">
			<view class="section-title__title">爱宠服务</view>
			<view class="section-title__more desc link">
				<text>更多</text>
				<u-icon name='arrow-right' color='#b2b2b2' size='20'></u-icon>
			</view>
		</view>
		
		<view class="servie">
			<view class="servie-item" v-for="item in serviceList" :key='item.id' @click="$link('/pagesMain/service/serviceDetail?id='+item.id)">
				<view class="servie-item__title">{{item.title}}</view>
				<view class="servie-item__desc" v-if="item.synopsis">{{common.stringPartOf(item.synopsis, 10)}}</view>
			</view>
		</view>
		
		<view class="section-title" @click="$link('/pagesMain/news/news')">
			<view class="section-title__title">方舟故事</view>
			<view class="section-title__more desc link">
				<text>更多</text>
				<u-icon name='arrow-right' color='#b2b2b2' size='20'></u-icon>
			</view>
		</view>
		
		<view class="news">
			<view class="news-item" v-for="item in news" :key='item.id' @click="$link('/pagesMain/news/newsDetail?id='+item.id)">
				<image class="news-item__img" :src="item.coverImg" mode="aspectFill"></image>
				<view class="news-item__info">
					<view class="title">{{item.title}}</view>
					<view class="">
						<text class="desc">{{item.creationTime | formatTime}}</text>
						<text class="desc view">{{item.hits}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="no-info" style="background-color: #F8F8F8;">{{common.footerText}}</view> -->
		<view class="footer-block"></view> 
		</view>
		
		<view class="container" style="display: none;">
			<view class="ball">测试pet</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				common,
				banner: [],
				petNewsList: [],
				navs: [],
				news: [],
				pageSize: 10,
				serviceList: [],
				noticeList: []
			}
		},
		async onLoad() {
			this.pageSize = common.pageSize
			// #ifndef MP-WEIXIN
			 this.navs = [
				{ id: 1, name: '在线预约', path: '/pagesMain/appointment/appointment', icon: '../../static/menu_01.png'  },
				{ id: 2, name: '在线挂号', path: '/pagesMain/register/register', icon: '../../static/menu_02.png'  },
				{ id: 3, name: '在线问诊', path: '/pagesMain/wz/wz', icon: '../../static/menu_03.png'  },
				{ id: 4, name: '爱宠病历', path: '/pagesMine/petsRecords', icon: '../../static/menu_04.png'  },
				{ id: 5, name: '圈子', path: '/pages/index/quanzi', icon: '../../static/menu_05.png'  },
			]
			// #endif
			
			// #ifdef MP-WEIXIN
			this.navs = [
				{ id: 1, name: '在线预约', path: '/pagesMain/appointment/appointment', icon: '../../static/menu_01.png'  },
				{ id: 2, name: '在线挂号', path: '/pagesMain/register/register', icon: '../../static/menu_02.png'  },
				{ id: 3, name: '在线问诊', path: '/pagesMain/wz/wz', icon: '../../static/menu_03.png'  },
				{ id: 4, name: '爱宠病历', path: '/pagesMine/petsRecords', icon: '../../static/menu_04.png'  },
				{ id: 5, name: '犬证办理', path: '/pagesMine/dogCard', icon: '../../static/menu_05.png'  },
			]
			// #endif
		
			
			this.getBanner()
			this.getServiceList()
		    this.getFzgs()
		},
		
		onShow() {
			this.getNoticeList()
			if(this.$isLogin()) {
				this.getUserInfo()
			}
		},
		
		methods: {
			getUserInfo() {
				api.getUserInfo({}, res => {
					this.userInfo = res
					common.setUserInfo(res)
				})
			},
			
			getBanner() {
				api.getBannerList({}, res => {
					res = res || []
					let temp = []
					res.map(item => {
						if(item.imgUrl) {
							temp.push({ image: item.imgUrl, ...item })
						}
					})
					this.banner = temp
				})
			},
			
			// 获取公告动态
			getNoticeList() {
				api.getNoticePages({ pageIndex: 1, pageSize: 10 }, res => {
					res = res.items || []
					res.map(item => {
						let timeStamp = new Date(item.creationTime).getTime()
						item.timeFormat = this.$u.timeFrom(timeStamp, false);
					})
					this.noticeList = res
				})
			},
			
			// 获取方舟故事
			getFzgs() {
				api.getArticlePageByCode({ typeCode: 'fzgs', pageIndex: 1, pageSize: 10 }, res => {
					this.news = res.items
				})
			},
			
			// 获取服务
			getServiceList() {
				api.getArticlePage({ typeCode: 'acfw', pageIndex: 1, pageSize: 4 }, res => {
					this.serviceList = res.items
				})
			},
			 
			clickBanner(e) {
				if(this.banner[e]['href']) {
					this.$link(this.banner[e]['href'])
				}
			}
		},
		
		onShareAppMessage(res) {
			return {
			  title: '上帝对诺亚说：你要用歌斐木造一只方舟，凡有血有肉的动物每样两个，你要带进方舟，好在你那里保全生命!',
			  path: '/pages/index/index'
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/common.scss';
	.container {
		width: 600upx;
		height: 400px;
		border: 1px solid #333;
		position: relative;
	}
	.ball {
		 position: absolute;
		 left: 0;
		 top: 0;
		 width: 80px;
		 height: 20px;
		 border-radius: 20px;
		 text-align: center;
		 border: 1px solid #999;
		 /* alternate：动画先正常运行再反方向运行，并持续交替运行 */
		 animation: horizontal 10s linear infinite alternate, vertical 8s linear  infinite alternate;
	 }
	 @keyframes horizontal {
		 0% {
			 left: 0;
		 }
		 100% {
			 /* 运动最大距离为盒子长度减去球的长度 */
			 left: calc(600upx - 80px);
		 }
	 }
	 @keyframes vertical {
		 0% {
			 top: 0;
		 }
		 100% {
			 /* 运动最大距离为盒子高度减去球的高度 */
			 top: calc(400px - 20px);
		 }
	 }
	
	.bg-f{
		background-color: #fff;
		padding-top: 20upx;
		width: 710upx;
		padding: 0 20upx;
	}
		.index-nav {
			@include flex-base;
			flex-wrap: wrap;
			.index-nav__item {
				@include flex-base;
				flex-direction: column;
				justify-content: flex-start;
				width: 20%;
				margin-bottom: 50upx;
				margin-top: 40upx;
			}
			.index-nav__img {
				width: 84upx;
				height: 84upx;
				border-radius: 100%;
				margin-bottom: 20upx;
			}
			.index-item__title{
				font-size: $font-size-26;
				color: $font-base-color;
			}
		}
	.notice{
		background-color: $bg-dark-color;
		border-radius: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		@include flex-base;
	}
	.notice-icon{
		width: 58upx;
		height: 147upx;
		display: block;
		flex-grow: 0;
	}
	.notice-swiper{
		flex-grow: 2;
		height: 180upx;
		.swiper-item{
			width: 100%;
			@include flex-base;
			justify-content: space-between;
		}
		.notice-title{
			font-size: 28upx;
			height: 30upx;
			margin-left: 20upx;
			display: flex;
			align-items: center;
			width: calc(100% - 110upx);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			// &::before{
			// 	content: '';
			// 	margin-right: 10upx;
			// 	display: inline-block;
			// 	width: 6upx;
			// 	height: 6upx;
			// 	background-color: $font-base-color;
			// }
		}
		.desc{
			width: 110upx;
			flex-grow: 0;
			height: 30upx;
			text-align: right;
		}
	}
	
	.news-item{
		@include flex-base;
		margin-bottom: 20upx;
		height: 150upx;
		padding: 10upx 0;
		box-sizing: border-box;
	}
	.news-item__img{
		width: 200upx;
		min-width: 200upx;
		height: 100%;
		display: block;
		flex-grow: 0;
		border-radius: 10upx;
	}
	.news-item__info{
		overflow: hidden;
		padding-left: 20upx;
		box-sizing: border-box;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
		    height: 100%;
		.title{
			font-size: $font-size-30;
			line-height: 42upx;
			max-height: 86upx;
			overflow: hidden;
		}
	}
</style>
